<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>用户管理</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="Thu, 19 Nov 1900 08:52:00 GMT">
    <link rel="shortcut icon" href="images/icons/favicon.ico" th:href="@{/images/icons/favicon.ico}">
    <link rel="apple-touch-icon" href="images/icons/favicon.png" th:href="@{/images/icons/favicon.png}">
    <link rel="apple-touch-icon" sizes="72x72" href="images/icons/favicon-72x72.png"
          th:href="@{/images/icons/favicon-72x72.png}">
    <link rel="apple-touch-icon" sizes="114x114" href="images/icons/favicon-114x114.png"
          th:href="@{/images/icons/favicon-114x114.png}">
    <!-- Loading bootstrap css-->
    <link type="text/css" rel="stylesheet"
          href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,700">
    <link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Oswald:400,700,300">
    <link type="text/css" rel="stylesheet"
          href="../static/vendors/jquery-ui-1.10.4.custom/css/ui-lightness/jquery-ui-1.10.4.custom.min.css"
          th:href="@{/vendors/jquery-ui-1.10.4.custom/css/ui-lightness/jquery-ui-1.10.4.custom.min.css}">
    <link type="text/css" rel="stylesheet" href="../static/vendors/font-awesome/css/font-awesome.min.css"
          th:href="@{/vendors/font-awesome/css/font-awesome.min.css}">
    <link type="text/css" rel="stylesheet" href="../static/vendors/bootstrap/css/bootstrap.min.css"
          th:href="@{/vendors/bootstrap/css/bootstrap.min.css}">
    <!-- LOADING STYLESHEET FOR PAGE-->
    <link type="text/css" rel="stylesheet" href="../static/vendors/intro.js/introjs.css"
          th:href="@{/vendors/intro.js/introjs.css}">
    <link type="text/css" rel="stylesheet" href="../static/vendors/calendar/zabuto_calendar.min.css"
          th:href="@{/vendors/calendar/zabuto_calendar.min.css}">
    <link type="text/css" rel="stylesheet" href="../static/vendors/sco.message/sco.message.css"
          th:href="@{/vendors/sco.message/sco.message.css}">
    <!-- Loading style vendors-->
    <link type="text/css" rel="stylesheet" href="../static/vendors/animate.css/animate.css"
          th:href="@{/vendors/animate.css/animate.css}">
    <link type="text/css" rel="stylesheet" href="../static/vendors/jquery-pace/pace.css"
          th:href="@{/vendors/jquery-pace/pace.css}">
    <link type="text/css" rel="stylesheet" href="../static/vendors/iCheck/skins/all.css"
          th:href="@{/vendors/iCheck/skins/all.css}">
    <link type="text/css" rel="stylesheet" href="../static/vendors/jquery-notific8/jquery.notific8.min.css"
          th:href="@{/vendors/jquery-notific8/jquery.notific8.min.css}">
    <link type="text/css" rel="stylesheet" href="../static/vendors/bootstrap-daterangepicker/daterangepicker-bs3.css"
          th:href="@{/vendors/bootstrap-daterangepicker/daterangepicker-bs3.css}">
    <!-- Loading style-->
    <link type="text/css" rel="stylesheet" href="../static/css/themes/style1/orange-blue.css" class="default-style"
          th:href="@{/css/themes/style1/orange-blue.css}">
    <link type="text/css" rel="stylesheet" href="../static/css/themes/style1/orange-blue.css" id="theme-change"
          class="style-change color-change" th:href="@{/css/themes/style1/orange-blue.css}">
    <!--  <link type="text/css" rel="stylesheet" href="css/style-responsive.css">-->
    <!-- 新增加的css样式-->
    <link type="text/css" rel="stylesheet" href="../static/css/addcss.css" th:href="@{/css/addcss.css}">
    <script src="/static/js/jquery-2.1.1.min.js" th:src="@{/js/jquery-2.1.1.min.js}"></script>
    <!-- 自定义css样式 -->
    <style>
        <!-- 表格th居中 -->
        th{
            text-align: center !important;
        }
        /*  弹框样式 */
        body .dialog{
            font-size:14px}
        .dialog{width:360px;border:solid 5px #666;position:absolute;display:none;z-index:101}
        .dialog .title{background-color:#33485C;padding:10px;color:#fff;font-weight:bold}
        .dialog .title img{float:right;margin-top: -8px;margin-right: -10px}
        .dialog .content{background-color:#fff;padding:25px;height:80px}
        .dialog .content img{float:left}
        .dialog .content span{float:left;padding-top:10px;padding-left:10px}
        .dialog .bottom{text-align:right;padding:10px 10px 10px 0px;background-color:#eee}
        .mask {width:100%;height:100%; background-color:rgba(0,0,0,0.4);position:absolute;
            top:0px;left:0px;display:none;z-index:100}

        /*模态框样式*/
        #customerForm .modal-footer{ width: 450px;}
        #customerForm .modal-content{width: 450px;}
        #customerForm .modal-body{width: 650px;}
        #customerForm .radio-inline{margin-right: 50px; padding-left: 20px;}
    </style>

</head>
<body class="">
<div>
    <a id="totop" href="#"><i class="fa fa-angle-up"></i></a>
    <!-- 引用头部 -->
    <div th:replace="common/top::topFragment"></div>
    <div id="wrapper">
        <!-- 引用左菜单导航栏 -->
        <div th:replace="common/leftToolBar::leftToolbar"></div>
        <div id="page-wrapper">
            <!-- 引用工具条 -->
            <div th:replace="common/toolBar::toolBar"></div>
            <!-- 右侧区内容的编写 -->
            <div class="page-content">
                <div class="" style="margin-bottom: 15px;text-align: center">
                    <!-- 查询 -->
                    <form id="MyForm" class="form-inline" th:action="@{/customer/list(pageNum=1)}" method="post">

                        <div class="form-group">
                            <label class="control-label">姓名：</label>
                            <input type="text" class="form-control" id="name" name="name" th:value="${map.name}"
                                   placeholder="请输入名称"/>
                        </div>
                        <div class="form-group">
                            <label class="control-label">性别：</label>
                            <input type="text" class="form-control" id="sex" name="sex" th:value="${map.sex}"
                                   placeholder="请输入性别"/>
                        </div>
                        <div class="form-group">
                            <label class="control-label">身份证：</label>
                            <input type="text" class="form-control" id="idNumber" name="idNumber"
                                   th:value="${map.idNumber}" placeholder="请输入完整身份证"/>
                        </div>
                        <div class="form-group">
                            <label class="control-label">手机：</label>
                            <input type="text" class="form-control" id="phone" name="phone" th:value="${map.phone}"
                                   placeholder="请输入手机号"/>
                        </div>
                        <button type="submit" class="btn btn btn-success">查询</button>
                        <button type="button" class="btn btn btn-info" onclick="replacement()">重置</button>

                    </form>

                    <!-- 表格 -->
                    <table id="tab" class="table table-bordered" style="margin-top: 20px">
                        <tr>
                            <th>用户编号</th>
                            <th>用户姓名</th>
                            <th>民族</th>
                            <th>性别</th>
                            <th>身份证号</th>
                            <th>电话</th>
                            <th>用户地址</th>
                            <th>证件类型</th>
                            <th>是否会员</th>
                            <th>操作</th>
                        </tr>
                        <tr th:each="cus : ${pageInfo.getList()}">
                            <td th:text="${cus.customerId}"></td>
                            <td th:text="${cus.name}"></td>
                            <td th:text="${cus.nation}"></td>
                            <td th:text="${cus.sex}"></td>
                            <td th:text="${cus.idNumber}"></td>
                            <td th:text="${cus.phone}"></td>
                            <td th:text="${cus.address}"></td>
                            <td th:text="${cus.idType}"></td>
                            <td>
                                <span th:if="${cus.member==0}">否</span>
                                <span th:if="${cus.member==1}">是</span>
                            </td>
                            <td>
                                <button type="button" class="btn btn-warning btn-xs active" th:disabled="${session.employee.role.roleId==3}" th:onclick="update([[${cus.customerId}]])">修改</button>
                                <span>&nbsp;</span>
                                <button type="button" class="btn btn-xs btn-primary active deleteBtn" th:disabled="${session.employee.role.roleId!=1}? true :false">删除</button>
                            </td>
                        </tr>
                    </table>
                </div>
                <div>
                    <ul class="pager">
                        <li>
                            <a th:href="@{/customer/list(pageNum=1,name=${map.name},sex=${map.sex},idNumber=${map.idNumber},phone=${map.phone})}">首页</a>
                        </li>
                        <li>
                            <a th:href="@{/customer/list(pageNum=${pageInfo.isHasPreviousPage()}?${pageInfo.getPrePage()}:1,name=${map.name},sex=${map.sex},idNumber=${map.idNumber},phone=${map.phone})}">&laquo;</a>
                        </li>
                        <li>第 [[${pageInfo.pageNum}]] 页</li>
                        <li>
                            <a th:href="@{/customer/list(pageNum=${pageInfo.isHasNextPage()}?${pageInfo.getNextPage()}:${pageInfo.pages},name=${map.name},sex=${map.sex},idNumber=${map.idNumber},phone=${map.phone})}">&raquo;</a>
                        </li>
                        <li>
                            <a th:href="@{/customer/list(pageNum=${pageInfo.pages},name=${map.name},sex=${map.sex},idNumber=${map.idNumber},phone=${map.phone})}">尾页</a>
                        </li>
                        <li>&nbsp;&nbsp;&nbsp;总页数 [[${pageInfo.pages}]] 页</li>
                        <li>&nbsp;&nbsp;&nbsp;总记录数 [[${pageInfo.total}]] 条</li>
                    </ul>
                </div>
            </div>
        </div>

        <!--  修改 模态框（Modal）-->
        <div class="modal fade" id="customerForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×
                        </button>
                        <h4 class="modal-title"> 修改用户信息 </h4>
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal" method="post">
                            <input type="hidden" class="form-control" id="u_customerId" name="customerId" th:value="${emp.customerId}">
                            <div class="form-group">
                                <label  class="col-sm-2 control-label">姓名：</label>
                                <div class="col-sm-5">
                                    <input type="text" class="form-control" id="u_name" name="name" th:value="${emp.name}">
                                </div>
                            </div>
                            <div class="form-group">
                                <label  class="col-sm-2 control-label">性别：</label>
                                <div class="col-sm-5">
                                    <label class="radio-inline radio_add">
                                        <input type="radio" name="sex" value="男"> 男
                                    </label>
                                    <label class="radio-inline radio_add">
                                        <input type="radio" name="sex"  value="女"> 女
                                    </label>
                                </div>
                            </div>
                            <div class="form-group">
                                <label  class="col-sm-2 control-label">手机号码：</label>
                                <div class="col-sm-5">
                                    <input type="text" class="form-control" id="u_phone" name="phone" th:value="${emp.phone}">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">家庭地址：</label>
                                <div class="col-sm-5">
                                    <input type="text" class="form-control" id="u_address" name="address" th:value="${emp.address}">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">出生日期：</label>
                                <div class="col-sm-5">
                                    <input type="text" class="form-control" id="u_birthday" name="birthday" th:value="${#dates.format(emp.birthday,'yyyy-MM-dd')}">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">身份证号：</label>
                                <div class="col-sm-5">
                                    <input type="text" class="form-control" id="u_IdNumber" name="IdNumber" th:value="${emp.IdNumber}">
                                    <span class="redIdNo" id="regIdNo" style="color: red"></span>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">证件类型：</label>
                                <div class="col-sm-5">
                                    <input type="text" class="form-control" id="u_IdType" name="idType" th:value="${emp.IdType}">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">民族：</label>
                                <div class="col-sm-5">
                                    <input type="text" class="form-control" id="u_nation" name="nation" th:value="${emp.nation}">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">状态：</label>
                                <div class="col-sm-5 colSmall">
                                    <label class="radio-inline">
                                        <input type="radio" name="status" id="status1" value="0" th:checked="${emp.status == 0}"> 黑名单
                                    </label>
                                    <label class="radio-inline">
                                        <input type="radio" name="status" id="status2"  value="1" th:checked="${emp.status == 1}"> 白名单
                                    </label>
                                </div>
                            </div>

                        </form>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">
                            关闭
                        </button>
                        <button type="button" class="btn btn-success" id="btn-success">
                            提交更改
                        </button>
                    </div>
                </div>
            </div> <!--/.modal-dialog&ndash-->
        </div> <!--/.modal&ndash-->
        <!-- 修改 -->
        <script>
            //回显数据
            function update(customerId) {
                $.post("/customer/emp/"+customerId,null,function (data) {
                    // alert(data)
                    $("#u_customerId").val(data.customerId);//
                    $("#u_name").val(data.name);
                    $("input[name=sex]").each(function(index,rad){
                        if ($(rad).val() == data.sex){
                            $(rad).prop("checked",true);
                            return true;
                        }
                    });
                    $("#u_phone").val(data.phone);
                    $("#u_address").val(data.address);
                    $("#u_birthday").val(new Date(data.birthday).toLocaleDateString().replace("/","-").replace("/","-"));
                    $("#u_IdNumber").val(data.idNumber);
                    $("#u_IdType").val(data.idType);
                    $("#u_nation").val(data.nation);
                    //console.log(data.status);
                    var inps = $("input[name='status']");
                    $.each(inps,function (index,inp) {
                        //console.log($(inp).val());
                        if ($(inp).val() == data.status) {
                            $(inp).attr("checked",true);
                        }
                    })
                    $("#customerForm").modal("show");
                },"json");

            }
            //删除获得其状态
            function delete_previous(idNumber){
                var url = "/orders/getOrdersByIdNumber";
                var params = "idNumber="+idNumber;
                var check_res;
                $.ajax({
                    async:false,
                    url: url,
                    data:params,
                    type: "POST",
                    dataType: "json",
                    success: function(result){
                        check_res=result;
                    },error:function(){}
                });
                return check_res;
            }


            //修改操作
            $(function () {
                $("#btn-success").unbind("click");
                $("#btn-success").click(function () {
                    //验证身份证
                    var sfzhmcode = $("#u_IdNumber").val().trim();
                    if (sfzhmcode.length != 18 || !(/^\d{18}$/.test(sfzhmcode))) {
                        document.getElementById('regIdNo').innerHTML = "您输入的身份证号码不是有效格式";
                        $("#regIdNo").css("display", "block");
                        return;
                    }
                    $("#regIdNo").css("display", "none");
                    var customerId = $("#u_customerId").val();//
                    var name = $("#u_name").val();
                    var sex = $("input[name='sex']:checked").val();
                    var phone = $("#u_phone").val();
                    var address = $("#u_address").val();
                    var birthday = $("#u_birthday").val();
                    var IdNumber = $("#u_IdNumber").val();
                    var IdType = $("#u_IdType").val();
                    var nation = $("#u_nation").val();
                    var status = $("input[name='status']:checked").val();
                    $.post("/customer/update/", {
                        "customerId":customerId,
                        "name" : name,
                        "sex" : sex,
                        "phone" : phone,
                        "address" : address,
                        "birthday" : birthday,
                        "idNumber" : IdNumber,
                        "idType" : IdType,
                        "nation" : nation,
                        "status" : status
                    }, function(result) {
                        if(result.success){
                            alert("修改成功");
                            location.href="/customer/list?pageNum=1";//刷新列表
                        }else{
                            alert("修改失败");
                        }
                    }, "json");
                })
            })

        </script>
        <script th:src="@{/js/stay/modal.js}"></script>
        <div th:replace="stay/common/modal::modal"></div>
        <!--弹窗内容-->
        <div class="mask"></div>
        <div class="dialog">
            <div class="title">系统提示！</div>
            <div class="content"></div>
            <div class="bottom">
                <input id="Button2" type="button" value="确定" class="btn btn-xs btn-warning btn2"/>
                <input id="Button3" type="button" value="取消" class="btn btn-xs btn-info btn3"/>
            </div>
        </div><!--弹窗结束-->
        <script type="text/javascript">
            //修改左上角的面包屑
            $(function () {
                $("#breadAppend").append('<i class="fa fa-home"></i> <a href="#">系统管理</a> <i class="fa fa-angle-right"></i> <a href="#">用户管理</a>');
                $("#SystemManage").addClass("active");
            })

            //重置表单
            function replacement() {
                $("#name").val("");
                $("#sex").val("");
                $("#idNumber").val("");
                $("#phone").val("");
                location.href="/customer/list?pageNum=1";
            }

            <!-- ajax删除方法 -->
            $(function() {
                var customerId=null;    //id ：要删除的值
                var name = null;        //name
               //判断是否可用删除
                $(".deleteBtn").click(function() { //注册删除按钮点击事件
                  //在这里判断是否可以删除
                    var idNumber = $(this).parent().siblings().eq(4).html();
                    var orders =  delete_previous(idNumber);
                    console.log(orders);
                   if (orders.length>=1){
                       showModal("提示信息","当前用户还在本店居住，不能删除");
                       return;

                   }
                    customerId = $(this).parent().siblings().eq(0).html();//获得id
                    name = $(this).parent().siblings().eq(1).html();      //获得名字
                    appendContent(name);    //调用弹框方法
                    $(".mask").show(); //显示背景色
                    showDialog(); //设置提示对话框的Top与Left
                    $(".dialog").show(); //显示提示对话框
                })

                //拼接删除.content的内容
                function appendContent(name) {
                    $(".content").empty();
                    var html = "提示："
                    html += "您确定要删除:"
                    html += "<font color='red' style='font-weight: bold'>";
                    html += name;
                    html += "</font>这位用户吗？"
                    $(".content").append(html);
                }
                /*
                *根据当前页面与滚动条位置，设置提示对话框的Top与Left
                */
                function showDialog() {
                    var objW = $(window); //当前窗口
                    var objC = $(".dialog"); //对话框
                    var brsW = objW.width();
                    var brsH = objW.height();
                    var sclL = objW.scrollLeft();
                    var sclT = objW.scrollTop();
                    var curW = objC.width();
                    var curH = objC.height();
                    //计算对话框居中时的左边距
                    var left = sclL + (brsW - curW) / 2;
                    //计算对话框居中时的上边距
                    var top = sclT + (brsH - curH) / 2;
                    //设置对话框在页面中的位置
                    objC.css({ "left": left, "top": top });
                }
                //页面窗口大小改变事件
                $(window).resize(function() {
                    if (!$(".dialog").is(":visible")) {
                        return;
                    }
                    showDialog(); //设置提示对话框的Top与Left
                });

                /* $(".title img").click(function() { //关闭图片点击事件
                     $(".dialog").hide();
                     $(".mask").hide();
                 })*/

                $("#Button3").click(function() {//取消按钮点击事件
                    $(".dialog").hide();
                    $(".mask").hide();
                })

                $("#Button2").click(function() {//确定按钮点击事件
                    $(".dialog").hide();
                    $(".mask").hide();
                    ajax_deleteCus(customerId);

                })
                //在这里执行删除命令
                function ajax_deleteCus(customerId){
                    var url = "/customer/delete";
                    var params  = "customerId="+customerId;
                    $.ajax({
                        async:false,
                        url: url,
                        data:params,
                        type: "POST",
                        dataType: "json",
                        success: function(data){
                            console.log(data.success);
                            if (data.success){
                                alert("删除成功！");
                                location.href="/customer/list?pageNum=1";//刷新列表
                            } else {
                                alert("删除失败！");
                            }
                        },error:function(){}
                    });
                }
            })//删除代码
        </script>
    </div>
    <!-- 引用底部 -->
    <div th:replace="common/bottom::bottom"></div>
</div>
</div>
<!-- 引用脚本 -->
<div th:replace="common/script::script"></div>
</body>
</html>
